<!doctype html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="ctrl">

<div class="container">
    <div class="process-list">
        <div style="margin: 5px">
            <h1>流程列表</h1>
            <button type="button" class="btn btn-primary" ng-click="reloadProcessList()">刷新</button>
            <button type="button" class="btn btn-success" ng-click="openProcessPage()">添加</button>
        </div>
        <div style="margin: 5px">
            <table class="table table-striped table-bordered table-hover">
                <tr ng-if="processList.length == 0">
                <tr>
                    <td>暂时没有数据</td>
                </tr>
                <tr ng-if="processList.length > 0">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr ng-if="processList.length > 0">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="process" ng-if="!!processFlag">
        <button type="button" class="btn btn-danger" ng-click="closeProcessPage()">关闭</button>
        <textarea class="form-control" rows="3"></textarea>
        <button type="button" class="btn btn-primary">保存</button>
    </div>

</div>


<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.8/angular.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('ctrl', function ($scope, $http) {
        $scope.processList = [];
        $scope.process = {};
        $scope.processFlag = false;

        $scope.openProcessPage = function () {
            $scope.processFlag = true;
            $scope.reloadProcess();
        };

        $scope.closeProcessPage = function () {
            $scope.processFlag = false;
            $scope.reloadProcess();
        };

        $scope.reloadProcess = function () {
            $scope.process = {};
        };

        $scope.reloadProcessList = function () {
            $http.get('/process').then(function (res) {
                console.log('processList', res);
                $scope.processList = res.data;
            })
        };

        $scope.onInit = function () {
            $scope.reloadProcessList();
        };

        $scope.onInit();
    });
</script>
</body>
</html>